<template>
  <div class="page">
    <global-header title="房间设置" @back="$router.back()">
      <template #right>
        <div class="flex mr-[10px] text-[15px] absolute right-0" @click="handleShowRefresh">
          <Refresh class="w-[18px]" />
          <span>刷新房号</span>
        </div>
      </template>
    </global-header>
    <main class="page-main">
      <div class="room-cell" @click="router.push('/admin/setting/basis')">
        <van-image
          class="!w-[50px] !h-[50px] !rounded-[6px] overflow-hidden"
          :src="netPath(roomInfo?.SysImg)"
        />
        <div class="grow-[1] w-0 ml-[10px]">
          <div class="text-[14px] font-bold">房间号：{{ userInfo?.RoomCode }}</div>
          <div class="mt-[2px] text-[#aaa]">到期时间: {{ formatDate(userInfo?.VipTime) }}</div>
          <div class="mt-[2px] text-[#aaa]">当前账号：{{ userInfo?.Name }}</div>
        </div>
        <div>
          <van-icon name="arrow" class="!text-[#aaa] !text-[12px]" />
        </div>
      </div>
      <div class="h-[10px]"></div>
      <van-cell-group>
        <van-cell title="房间设置" is-link to="/admin/setting/room" />
        <van-cell title="游戏设置" is-link to="/admin/setting/game" />
        <van-cell title="消息设置" is-link to="/admin/setting/message" />
        <van-cell title="快捷回复" is-link to="/admin/setting/reply" />
      </van-cell-group>
      <div class="h-[10px]"></div>
      <van-cell-group>
        <van-cell
          :title="item.label"
          is-link
          :value="showValue(item)"
          v-for="item in settingData.list"
          @click="handleShowPopup(item)"
        />
      </van-cell-group>
      <div class="h-[10px]"></div>
    </main>
    <van-dialog
      v-model:show="settingData.show"
      title="更新房间号"
      show-cancel-button
      :before-close="handleBeforeClose"
    >
      <div class="p-[15px]">
        <div class="text-[14px]">
          机器人房间号刷新后，再次进入房间需要输入的房间号，确认需要刷新吗？
        </div>
        <div class="text-[15px] mt-[15px]">
          <span class="text-red">*</span>
          <span>房主密码</span>
        </div>
        <div class="mt-[15px]">
          <van-field
            class="!bg-[#f6f9fe] !rounded-[6px]"
            v-model="settingData.password"
            type="password"
            placeholder="请输入密码"
          />
        </div>
      </div>
    </van-dialog>
    <RoomSettingPopup
      :title="settingData.title"
      :keyName="settingData.keyName"
      :keyValue="settingData.keyValue"
      ref="settingPopupRef"
    />
  </div>
</template>
<route>
  {
    name: "admin-main-setting",
    meta: {
      pageIndex: 2,
    }
  }
</route>
<script setup lang="ts">
import { Refresh } from "@vicons/ionicons5";
import RoomSettingPopup from "@/components/room-setting-popup.vue";

import { useRoomStore } from "@/store/modules/room";
import { useUserStore } from "@/store/modules/user";
import { formatDate, netPath } from "@/utils/common";
import { storeToRefs } from "pinia";
import { toast } from "@/utils/toast";
import { reqUpdateRoomCode } from "@/api/setting";

type ListItem = {
  label: string;
  value: number | string | null;
  keyName: BasisConfigKeys;
};
type SettingData = {
  title: string;
  keyName: BasisConfigKeys;
  keyValue: number | string | null;
  list: ListItem[];
  show: boolean;
  password: string;
};

const router = useRouter();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const roomStore = useRoomStore();
const { roomInfo } = storeToRefs(roomStore);
const settingData = reactive<SettingData>({
  title: "",
  keyName: <BasisConfigKeys>"RoomAnnou",
  keyValue: "",
  list: [
    { label: "房间公告", value: "", keyName: "RoomAnnou" },
    { label: "系统消息中显示金额最低值", value: 0, keyName: "SysMinPrice" },
    { label: "低分不发账单消息", value: 0, keyName: "LowBalanceNobill" },
    { label: "下分密码可错次数", value: 0, keyName: "WithPwdErrCount" },
    { label: "单次下注预警金额值", value: 0, keyName: "SingleBetNotice" },
    { label: "大额中奖预警值", value: 0, keyName: "SingleWinNotice" },
    { label: "会员最低上分金额", value: 0, keyName: "MiniApply" },
    { label: "会员最低下分金额", value: 0, keyName: "MiniDown" }
  ],
  show: false,
  password: ""
});
const settingPopupRef = ref();

const handleShowRefresh = () => {
  settingData.show = true;
  settingData.password = "";
};
const handleShowPopup = (item: ListItem) => {
  settingData.title = item.label;
  settingData.keyName = item.keyName;
  settingData.keyValue = item.value;
  nextTick(() => {
    settingPopupRef.value?.open();
  });
};

const showValue = (item: ListItem) => {
  if (item.keyName == "RoomAnnou") {
    return "";
  } else {
    return item.value !== null ? item.value : "";
  }
};

const setBasisData = () => {
  if (roomInfo.value) {
    settingData.list.forEach(item => {
      const typedKey = item.keyName as BasisConfigKeys;
      if (typedKey in roomInfo.value! && roomInfo.value![typedKey] !== undefined) {
        item.value = roomInfo.value![typedKey];
      }
    });
  }
};

// 修改备注
const handleBeforeClose = async (action: "confirm" | "cancel") => {
  return new Promise<boolean>(async resolve => {
    if (action == "confirm") {
      if (!settingData.password) {
        toast.info("请输入密码");
        resolve(true);
      } else {
        try {
          const res = await reqUpdateRoomCode(settingData.password);
          toast.success("更新房间号成功");
          userInfo.value!.RoomCode = res.data.RoomCode;
          resolve(true);
        } catch (error) {
          resolve(true);
        }
      }
    } else {
      resolve(true);
    }
  });
};

watch(() => roomInfo.value, setBasisData, { deep: true });

onMounted(() => {
  roomStore.actionRoomInfo();
  setBasisData();
});
</script>
<style scoped lang="scss">
:deep() {
  .van-cell {
    .van-cell__title {
      flex: 1.5;
    }
    .van-icon-arrow {
      font-size: 12px;
    }
  }
}
</style>
<style scoped>
.room-cell {
  @apply p-[15px] bg-[#fff] flex justify-between items-center;
}
</style>
